<template>
  <div>
    <el-row style="background-color: #dadada" type="flex" align="middle">
      <el-col :span="1">
        <el-button native-type="button" icon="el-icon-arrow-left" style="border-width: 0px;background-color: #dadada" @click="backClick">返回</el-button>
      </el-col>
      <el-col :span="5" :offset="8">
        <label >{{title}}</label>
      </el-col>
    </el-row>
    <el-row>
      <image-upload ref="upload" :fileList="fileList" :urlList="urlList" :multiple="false" :limitCount="1"></image-upload>
    </el-row>
    <el-row>
      <div>
        标题  <el-input v-model="name" placeholder="请输入标题" style="width: 300px">{{name}}</el-input>
      </div>
    </el-row>
    <el-row>
      <div>
        <textarea class="introduce" placeholder="请输入详细介绍" v-model="introduce">{{introduce}}</textarea>
      </div>
    </el-row>
    <el-row>
      <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
      <el-button type="info" @click="cancel" plain >取消</el-button>
    </el-row>

  </div>
</template>

<script>
  import ImageUpload from '../Common/ImageUpload'
  export default {
    name: 'AddMerchant',
    data(){
      return{
        title:'新增商户',

        loading: false,
        urlList:[],
        fileList:[],

        merchantId:this.$route.query.merchantId,
        name:'',
        logo:'',
        introduce:''
      }
    },
    mounted(){
      if (this.merchantId > 0){
        this.title = "编辑商户"
        this.loadDetail()
      }
    },
    components:{
      ImageUpload
    },
    methods:{
      loadDetail(){
        this.getAxios('merchant/load',{
          id:this.merchantId
        }).then(res => {
          let data = res.data
          this.name = data.name
          this.introduce = data.introduce

          if (!this.isEmpty(data.logo)){
            let obj = new Object();
            obj.url = data.logo;
            obj.name = 'logo'
            this.fileList.push(obj);
            this.urlList.push({
              url:data.logo
            })
          }


        }).catch(error => {
          this.$message({
            type: 'info',
            message: error.msg
          })
        })
      },// 取消
      cancel(){
        return this.$confirm("取消本次操作?").then(() => {
          this.backClick()
        })
      },
      //提交数据到后台
      handleSubmit() {
        if (this.name.length < 1){
          this.$message({
            type: 'info',
            message: '请输入商户名称'
          })
          return
        }
        var urls = new Array()
        for (let i = 0, len = this.urlList.length; i < len; i++) {
          let obj = this.urlList[i]
          urls.push(obj.url)
        }
        this.logo = urls.join(",")
        let url = this.merchantId > 0 ? 'merchant/update' : 'merchant/insert'
        this.getAxios(url,{
          id:this.merchantId,
          name:this.name,
          logo:this.logo,
          introduce:this.introduce
        }).then(res => {
          this.name = ''
          this.introduce = ''
          this.$refs.upload.clearAllFile()
          this.urlList.removeAll()
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.backClick()
        }).catch(error => {
          this.$message({
            type: 'info',
            message:error.msg
          });
        })
      },
      backClick(){
        this.$router.back()
      }
    }
  }
</script>

<style scoped>
  .introduce{
    width: 60%;
    height: 150px;
  }
</style>
